@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
@import "~bpmn-js-token-simulation/assets/css/normalize.css";

.djs-palette {
  background: #ffffff;
  border: solid 1px #cccccc !important;
  border-radius: 2px;
}

.my-process-designer {
  display: flex;
  margin: 5px;
  flex-direction: column;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.my-process-designer .my-process-designer__header {
  width: 100%;
  text-align: center;
  min-height: 36px;
}

.my-process-designer .my-process-designer__header .align-left i {
  transform: rotate(0deg);
}

.my-process-designer .my-process-designer__header .align-right i {
  transform: rotate(0deg);
}

.my-process-designer .my-process-designer__header .align-top i {
  transform: rotate(90deg);
}

.my-process-designer .my-process-designer__header .align-bottom i {
  transform: rotate(-90deg);
}

.my-process-designer .my-process-designer__header .align-center i {
  transform: rotate(0deg);
}

.my-process-designer .my-process-designer__header .align-middle i {
  transform: rotate(90deg);
}

.my-process-designer .my-process-designer__container {
  display: inline-flex;
  width: 100%;
  flex: 1;
}

.my-process-designer .my-process-designer__container .my-process-designer__canvas {
  flex: 1;
  height: 100%;
  position: relative;
  background: url("") repeat !important;
}

.my-process-designer .my-process-designer__container .my-process-designer__canvas div.toggle-mode {
  display: none;
}

.my-process-designer .my-process-designer__container .my-process-designer__property-panel {
  height: 100%;
  overflow: scroll;
  overflow-y: auto;
  z-index: 10;
}

.my-process-designer .my-process-designer__container .my-process-designer__property-panel * {
  box-sizing: border-box;
}

.my-process-designer .my-process-designer__container svg {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.djs-palette.open .djs-palette-entries div[class^="bpmn-icon-"]:before, .djs-palette.open .djs-palette-entries div[class*="bpmn-icon-"]:before {
  line-height: unset;
}

.djs-palette.open .djs-palette-entries div.entry {
  position: relative;
}

.djs-palette.open .djs-palette-entries div.entry:hover::after {
  width: max-content;
  content: attr(title);
  vertical-align: text-bottom;
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  overflow: hidden;
  transform: translateX(100%);
  font-size: 0.5em;
  display: inline-block;
  text-decoration: inherit;
  font-variant: normal;
  text-transform: none;
  background: #fafafa;
  box-shadow: 0 0 6px #eee;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 4px;
  z-index: 100;
}

pre {
  margin: 0;
  height: 100%;
  overflow: hidden;
  max-height: calc(80vh - 32px);
  overflow-y: auto;
}

.hljs {
  word-break: break-word;
  white-space: pre-wrap;
}

.hljs * {
  font-family: Consolas, Monaco, monospace;
}
